<template >
  <div class="notice-box">
    <div class="notice-box-filter">
      <el-form ref="form" label-width="80px">
        <div class="table-filter table-filter-home">
          <div>
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="time"
                clearable
                type="datetimerange"
                value-format="yyyyMMddHHmm"
                format="yyyy-MM-dd HH:mm"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                popper-class="table-date-timerange"
                :default-time="['00:00:00']"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="发布状态">
              <dg-select v-model="condition.sffb.value" :data="constant.BM_FBZT" clearable />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="公告类型">
              <dg-select v-model="condition.gglx.value" :data="constant.DM_GGXX_GGLX" clearable />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="关键词">
              <el-input v-model="condition.keyword.value" placeholder="编号、标题、正文、创建人" clearable />
            </el-form-item>
          </div>
          <div></div>
          <div>
            <el-form-item class="operate-btns">
              <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()">查询</el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="notice-box-content">
      <el-button @click="add()" class="add" type="primary">新增</el-button>
      <comm-table ref="table" class="table" :condition="condition" :columns="columns" url="/v1/ggxx/basesearch">
        <template slot-scope="{ row }">
          <el-button type="text" @click="add(row.id)" :disabled="row.sffb=='1'">编辑</el-button> <!-- row.qszt === '1' -->
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="onDelete(row.id)" :disabled="row.sffb=='1'">删除</el-button>
        </template>
      </comm-table>
    </div>
  </div>
</template>
<script>
import { deleteNotice, saveDraft, onPublish, updateNotice } from '@/api/notice';
import { deepClone } from '@/utils/common';
import { DM_GGXX_GGLX, BM_DEPT } from '@/common/codeDic';
import { mapState } from 'vuex';
export default {
  name: 'NoticeManagement',
  data() {
    return {
      cloneCondition: null,
      // 列表查询条件
      condition: {
        create_Time: {
          value: '',
          op: '='
        },
        sffb: {
          value: '',
          op: '='
        },
        gglx: {
          value: '',
          op: '='
        },
        keyword: {
          value: '',
          op: 'like'
        }
      },
      data1: [
        {
          value: '01',
          label: '单位1'
        }
      ],
      // 表格项
      columns: [
        { type: 'index', label: '序号', width: 70 },
        { label: '创建时间', prop: 'createTime' },
        { label: '公告类型', prop: 'gglx', code: DM_GGXX_GGLX },
        {
          label: '标题',
          render: (h, row) => {
            const _this = this;
            return h(
              'span',
              {
                class: 'v-link',
                on: {
                  click() {
                    // 隐藏tooltip(由于不自动消失)
                    $('.el-tooltip__popper').css('display', 'none');
                    _this.$router.push({ name: 'NoticeManagementDetail', params: { id: row.id } });
                  }
                }
              },
              row.ggbt
            );
          },
          width: 300
        },
        { label: '发布状态', prop: 'sffb', render: (h, row) => h('div', {}, row.sffb === '0' ? '未发布' : '已发布') },
        { label: '创建单位', prop: 'createDept', code: BM_DEPT },
        { label: '创建人', prop: 'createUsername' },
        { label: '操作', type: 'operate' }
      ],
      time: null
    };
  },
  computed: {
    ...mapState(['constant'])
  },
  watch: {
    time(val) {
      this.condition.create_Time.value = val ? `${val[0]},${val[1]}` : '';
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['DM_GGXX_GGLX']);
    this.cloneCondition = deepClone(this.condition);
  },
  activated() {
    this.$refs.table.searchForm();
  },
  methods: {
    add(id) {
      const _this = this;
      const layer = this.$dgLayer({
        title:id ? '编辑': '新增',
        component: require('./add'),
        area: ['60%', '500px'],
        props: {
          id
        },
        on: {
          success(type, form) {
            let fn=""; // 调用接口
            let jsdwdm = [];
            if (form.jsdwdm) {
              jsdwdm = form.jsdwdm.map((item) => item[item.length - 1]);
            }
            if(id){
             fn = type ? onPublish :updateNotice;
            }else{
               fn=type ? onPublish :saveDraft;
            }
            const loadingInstance = _this.$loading({
              lock: true,
              text: '保存中...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            fn({ ...form, id, jsdwdm: jsdwdm.join() }).then(({ data }) => {
              if (data.statusCode === '200') {
                _this.$message.success('操作成功');
                _this.$refs.table.searchForm();
                loadingInstance.close();
                layer.close(layer.dialogIndex);
              } else {
                _this.$message.warning('操作失败');
                loadingInstance.close();
              }
            });
          }
        }
      });
    },
    onDelete(id) {
      this.$confirm('确认删除?').then(() => {
        const loadingInstance = this.$loading({
          lock: true,
          text: '删除中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        deleteNotice(id).then(({ data }) => {
          if (data.statusCode === '200') {
            this.$refs.table.searchForm();
            this.$message.success('删除成功');
            loadingInstance.close();
          } else {
            this.$message.warning('删除失败');
            loadingInstance.close();
          }
        });
      });
    },
    /**
     * 重置
     */
    reset() {
      this.time = null;
      this.condition = deepClone(this.cloneCondition);
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    }
  }
};
</script>
<style scoped lang='scss'>
.notice-box-content {
  .add {
    margin: 1rem 1.5rem;
  }
  background: #fff;
  margin-top: 0.6rem;
  .table {
    padding: 0px 20px 20px;
  }
}
</style>
